<template>
  <div class="table">


    <div class="comment" v-for="item in list">
      <div class="info">
<!--        头像用户名-->
        <el-avatar icon="jpg" :src="item.icon" :size="30"></el-avatar>
        <div class="right">
          <div class="name">{{item.username}}</div>

          <div class="date">{{item.gtmCreate}}</div>

        </div>
      </div>
      <div class="content" style="position:relative;left: 20px">{{item.msg}}</div>
      <div class="control" style="position:relative;left: 20px">
<!--        点赞回复-->
        <span class="like" :class="{active: true}" @click="likeClick(item,'MSG')">
          <i :class="item.praise?'el-icon-star-on':'el-icon-star-off'"></i>
          <span class="like-num">{{item.star > 0 ? item.star + '人赞' : '赞'}}</span>
        </span>
        <span class="comment-reply" @click="pop(item)">
          <i class="el-icon-chat-line-square" style="position: relative;left: 20px;"></i>
          <el-button type="text" round >回复</el-button>

        </span>

        <el-button type="text" round style="float: right" v-if="hide(item)" @click="del(`MSG`,item,item)">删除</el-button>
      </div>
      <div class="reply">
        <div class="item" v-for="reply in item.reply">
          <div class="reply-content">
            <el-avatar icon="jpg" :src="reply.icon" :size="20"></el-avatar>
            <span class="from-name">{{reply.pusername}}</span><span>: </span>
            <span class="to-name" style="color: #20a0ff">@{{reply.username}}</span>
            <span>{{reply.msg}}</span>
          </div>
          <div class="reply-bottom">

            <span>{{reply.gtmCreate}}</span>
            <span class="like" :class="{active: true}" @click="likeClick(reply,'REPLY')">
              <i :class="reply.praise?'el-icon-star-on':'el-icon-star-off'"></i>
              <span class="like-num">{{reply.star > 0 ? reply.star + '人赞' : '赞'}}</span>
            </span>
            <span class="reply-text" @click="pop(item)">
              <i class="iconfont icon-comment"></i>
              <el-button type="text" round style="position: relative;left: -20px;">回复</el-button>
            </span>
            <el-button type="text" round style="float: right" v-if="hide(reply)" @click="del(`REPLY`,reply,item)">删除</el-button>
          </div>
        </div>
        <div  v-if="item.reply!=null && item.reply.length > 0" class="write-reply" @click="pop(item)">
          <i class="el-icon-edit"></i>
          <el-button type="text" round style=" position:relative;left: -20px" >添加新评论</el-button>
        </div>
        <transition name="fade">
          <div  v-if="item.id===disabled">
            <el-input
                class="input-wrapper"
                v-model="name"
                      type="textarea"
                      :rows="3"
                      autofocus
                      placeholder="写下你的评论">
            </el-input>
            <div>
              <el-button type="info" plain @click="cancel">取消</el-button>
<!--              <span  @click="cancel">取消</span>-->
<!--              <el-button  type="success" round @click="commitComment(item)">确定</el-button>-->
              <el-button type="success" :disabled="show" @click="commitComment(item)" style="float: right">发表评论</el-button>
            </div>
          </div>
        </transition>
      </div>
    </div>
    <el-input
        type="textarea"
        placeholder="请输入内容"
        v-model="msg"
        maxlength="200"
        show-word-limit
    >
    </el-input>
    <el-button type="success"  :disabled="show" @click="commit()" style="float: right">发表评论</el-button>
<!--    <el-button  type="success" round @click="commit()" style="float: right">评论</el-button>-->
    <div class="block">
<!--      分页-->

      <el-pagination
          @size-change="handleSizeChange"
          @current-change="handleCurrentChange"
          @prev-click="back"
          @next-click="next"
          :current-page.sync="pageNo"
          :page-size="pageSize"
          layout="prev, pager, next, jumper"
          :total="total"
          :hide-on-single-page="true"
      >
      </el-pagination>

    </div>
  </div>

</template>
<script>
import axios from "axios";
import Qs from "qs";
export default {
  name:'WordTable',
  data(){
    return {
      // 页码页数总页数
      pageNo:1,
      pageSize:5,
      total:5,
      // 评论区内容
      name:"",
      msg:"",
      // 控制是否展开
      disabled:"",
      list:[

        // {
        //   gtmCreate:"",
        //   id :Number,
        //   userid : Number,
        //   username : "",
        //   msg : '',
        //   check:0,
        //   star :0,
        //   praise:false,
        //   icon:"",
        //   reply:[{
        //     gtmCreate:"",
        //     id :Number,
        //     userid : Number,
        //     pusername:"",
        //     username : "",
        //     msg : '',
        //     check:0,
        //     star :0,
        //     praise:false,
        //     icon:"",
        //   }]
        // }
      ]
      //list 留言数据
      // list : [
      //   {
      //     id :1,
      //     userid : 1,
      //
      //
      //     username : '评论者',
      //     // msg是指留言框内的内容
      //     msg : '留言内容',
      //     check:0,
      //     //createTime指的是时间
      //     gtmCretae : '2020-1028-22',
      //     //star是指点赞数量
      //     star : 10,
      //     praise:true,
      //     icon:"E:\\EJAVA\\xxyf-spring-boot\\xxyf-threder\\src\\main\\resources\\static\\default.jpg",
      //     reply:[{
      //       id :1,
      //       praise:true,
      //       userid : 1,
      //       // nikename是指昵称框内的内容
      //       pusername:"被评论者",
      //       username : '评论者',
      //       // desc是指留言框内的内容
      //       msg : '留言内容',
      //       check:0,
      //       //createTime指的是时间
      //       gtmCretae : '2020-10-28-22',
      //       //star是指点赞数量
      //       star : 10,
      //       icon:"E:\\EJAVA\\xxyf-spring-boot\\xxyf-threder\\src\\main\\resources\\static\\default.jpg",
      //     }]
      //   },{
      //     id :2,
      //     userid : 1,
      //     // nikename是指昵称框内的内容
      //
      //     username : '评论者',
      //     // desc是指留言框内的内容
      //     msg : '留言内容',
      //     check:0,
      //     //createTime指的是时间
      //     gtmCretae : '2020-1028-22',
      //     //star是指点赞数量
      //     star : 10,
      //     icon:"E:\\EJAVA\\xxyf-spring-boot\\xxyf-threder\\src\\main\\resources\\static\\default.jpg",
      //     reply:[]
      //   }
      // ],


    }
  },
  methods:{
    // 分页查询
    pars(){
      axios({
        url:`/msg/query/${window.localStorage.getItem("ID")!=null?window.localStorage.getItem("ID"):0}`,
        method:"GET",
        params:{pageNo:this.pageNo,pageSize:this.pageSize}
      }).then(data=>{
            // 获取返回数据
            if (data.data.code===1000){
              this.list=data.data.data.items;
              this.pageNo=data.data.data.page;
              this.pageSize=data.data.data.pageSize;
              this.total = data.data.data.counts;
            }else {
              this.$message.error(data.data.msg);
            }
          }
      )
    },
    // 下面四个方法全是分页
    back(){

      this.pageNo-1;
      this.pars()
    },
    next(){

      this.pageNo+1;
      this.pars()
    },
    handleSizeChange(val) {

      this.pageNo=val;
      this.pars()
    },
    handleCurrentChange(val) {

      this.pageNo=val;
      this.pars()
    },
    // 点赞
    likeClick(reply,type){
      if (reply.praise){

        axios({
          url:`/msg/notLike/${type}/${reply.id}/${window.localStorage.getItem("ID")!=null?window.localStorage.getItem("ID"):0}`,
          method:"delete"
        }).then(data=>{
          if (data.data.code===1000){
            reply.praise=false
            reply.star--;
          }else {
            this.$message.error(data.data.msg);
          }
        })
      }else {
        axios({
          url:`/msg/like/${type}/${reply.id}/${window.localStorage.getItem("ID")!=null?window.localStorage.getItem("ID"):0}`,
          method:"get"
        }).then(data=>{
          if (data.data.code===1000){
            reply.praise=true
            reply.star++;
          }else {
            this.$message.error(data.data.msg);
          }
        })
      }


    },
    // 删除操作
    del(type,item,itme1){
      axios({
        url:`/msg/delete/${type}/${item.id}/${window.localStorage.getItem("ID")}`,
        method:"delete"
      }).then(data=>{
        if (data.data.code===1000){
          if (type==="MSG"){
		  this.list.splice(this.list.indexOf(item),1)
          }else {
            // itme1.reply.filter(x=>x!==item)
            let new_set = new Set(itme1.reply)
            new_set.delete(item)
            itme1.reply = [...new_set]
            console.log(itme1.reply)
          }
        }else {
          this.$message.error(data.data.msg);
        }
      })
    },
    // 显示评论区 参数为当前评论对象
    pop(id){
      this.name=""
      this.disabled=id.id
    },
    // 关闭评论区
    cancel(){
      this.name=""
      this.disabled=""
    },
    // 提交留言信息
    commit(){
      if (name != null && name.length<=0){
        axios({
          url:"/msg/crate",
          method:"post",
          data:{
            userid:window.localStorage.getItem("ID"),
            username:window.localStorage.getItem("UserName"),
            icon:window.localStorage.getItem("icon"),
            msg:this.msg,
          }
        }).then(data=>{
          if (data.data.code===1000){
            this.list.push(data.data.data)
            this.msg=""
            this.disabled=""
          }else {
            this.$message.error(data.data.msg);
          }

        })
      }
    },
    // 提交回复信息
    commitComment(item){
      if (name != null && name.length<=0){
        axios({
          url:"/msg/insert",
          method:"post",
          data:{userid:window.localStorage.getItem("ID"),
            messageid:item.id,
            username:item.username,
            icon:window.localStorage.getItem("icon"),
            msg:this.name,
            pusername:window.localStorage.getItem("UserName")
          }
        }).then(data=>{
          if (data.data.code===1000){
            item.reply.push(data.data.data);
            this.disabled="";
            this.total++;

          }else {
            this.$message.error(data.data.msg);
          }
        })
      }

    },
    // 判断是否显示删除按钮
    hide(item){

      return item.userid==window.localStorage.getItem("ID")
    }


  },
  mounted() {
    // 查询评论区默认分页一页
    axios({
      url:`/msg/query/${window.localStorage.getItem("ID")!=null?window.localStorage.getItem("ID"):0}`,
      method:"GET",
      params:{pageNo:this.pageNo,pageSize:this.pageSize}
    }).then(data=>{
      // 获取返回数据
      if (data.data.code===1000){
        this.list=data.data.data.items;
        this.pageNo=data.data.data.page;
        this.pageSize=data.data.data.pageSize;
        this.total = data.data.data.counts;

      }else {
        this.$message.error(data.data.msg);
      }
        }
    )
  },
  computed:{
    show(){
      return window.localStorage.getItem("ID")===null
    }
  }

}
</script>
<style >
/*靠右*/
.right {
  display: flex;
  flex-direction: column;
  margin-left: 10px;
}
/*定义用户名文字大小*/
.name {
  font-size: 16px;
  color: #303133;
  margin-bottom: 5px;
  font-weight: 500;
}
/*整体div*/
.table{
  box-shadow: 10px 10px 10px 5px rgba(0,0,0,0.9);
  padding: 0 10px;
  box-sizing: border-box;
  width: 80%;
  position: absolute;
  top:70px;
  left:150px ;
  /*background-color: #c6cbce;*/
}
.comment {
  display: flex;
  flex-direction: column;
  padding: 10px;
  border-bottom: 1px solid #F2F6FC;
}
.info {
  display: flex;
  align-items: center;
}
.date {
  font-size: 12px;
  color: #909399;
}
.content {
  font-size: 16px;
  color: #303133;
  line-height: 20px;
  padding: 10px 0;
}
.control {
  display: flex;
  align-items: center;
  font-size: 14px;
  color: #909399;
}
like {
  display: flex;
  align-items: center;
  margin-right: 20px;
  cursor: pointer;
}
.iconfont {
  font-size: 14px;
  margin-right: 5px;
}
.comment-reply {
  display: flex;
  align-items: center;
  cursor: pointer;
}
.iconfont {
  font-size: 16px;
  margin-right: 5px;
}
.reply {
  margin: 10px 30px;
  border-left: 2px solid #DCDFE6;
}
.from-name {
  color: #303133;
}
.to-name {
  color: #303133;
  margin-left: 5px;
  margin-right: 5px;
}
.reply-content {
  display: flex;
  align-items: center;
  font-size: 14px;
  color: #303133;
}
.reply-bottom {
  display: flex;
  align-items: center;
  margin-top: 6px;
  font-size: 12px;
  color: #909399;
}
.reply-text {
  display: flex;
  align-items: center;
  margin-left: 10px;
  cursor: pointer;
}
.icon-comment {
  margin-right: 5px;
}
.write-reply {
  display: flex;
  align-items: center;
  font-size: 14px;
  color: #909399;
  padding: 10px;
  cursor: pointer;
}
.el-icon-edit {
  margin-right: 5px;
}

</style>